<template>
  <div class="main-passlogin">
     <!-- <so-header :seller="headerTitle"></so-header> -->
      <setHeader></setHeader>
      <div class="content y-login" style="margin: 0;">
        <!-- 大logo -->
        <!-- <img class="y-login-img" src="../common/images/logo1.png"  slot="icon"> -->
        <i class="iconfont icon-youquanlogozhuanhuan y-login-img"></i>
        <!-- 账号密码输入框 -->
        <!-- <div class="default_input_box">
            <input type="text" placeholder="请输入手机号码" v-model="ruleForm2.username" maxlength="11"  ref="ruleForm2">
        </div>
        <div class="default_input_box clear">
            <input type="text" placeholder="请输入验证码" v-model="ruleForm2.password" ref="ruleForm2" style="padding-right: 2rem;">
				    <span id="btn" @click="sendSMS" :disabled="contpending">{{contpending ? count + 's后重新发送' : '获取验证码'}}</span>
        </div> -->


        <mt-field class="mint-user-cell" @focus.native.capture="phoneFocus" @blur.native.capture="phoneBlur" v-model="ruleForm2.username" placeholder="请输入手机号码/用户名" type="email" :attr="{ maxlength: 11 }" ref="ruleForm1"></mt-field>
        <mt-field class="mint-user-cell" @focus.native.capture="smsFocus" @blur.native.capture="smsBlur" v-model="ruleForm2.password" label="" type="password" :attr="{ minlength: 6 }" placeholder="请输入密码" ref="ruleForm2">
          <!-- <mt-button> -->
            
          <!-- </mt-button> -->
          <!-- <mt-badge size="small">1111</mt-badge> -->
          <!-- <div><img src="../common/icon/eye2.png" class="y-ShowPassword" slot="icon"></div> -->
          <!-- <i class="iconfont icon-chakan"></i> -->
        </mt-field>
        <!-- <mt-field class="mint-user-cell" label="" v-model="ruleForm2.captcha" placeholder="请输入密码" @focus.native.capture="smsFocus" @blur.native.capture="smsBlur" ref="ruleForm2">
          <mt-button type="danger" class="y-code-btn" v-on:click="sendSMS">获取验证码</mt-button>
        </mt-field>
        <div class="y-text-top">
          <span class="text NoGetCode" style="float:right;"><router-link to="">收不到验证码？</router-link></span>
        </div> -->
        
        <!-- 登陆按钮 -->
        <mt-button type="danger" size="large"  class="el-long-button el-long-create-button el-long-user-button y-btn-red" v-on:click="handleSubmit2">确认</mt-button>
        <mt-button type="danger" class="el-long-button el-long-user-button el-long-user-re-button y-btn-white" style="background-color:#fff;color:#ef6580;border:1px solid; font-weight: bold;" @click="smsregister">验证码登录</mt-button>
        <!--<mt-button type="primary" size="large" style="margin-bottom: 15px;">短信验证码登录</mt-button>
        <span class="text" style="float:left" ><router-link to="/register">注册账号</router-link></span>-->

        <!-- 登陆方式和找回密码 -->
        <div class="y-text-top clear">
          <span class="text"><router-link to="/register" style="float:left; color: #e50838; font-size: 0.22rem;">注册账号</router-link></span>
          <span class="text"><router-link to="/Reset" style="float:right; color: #e50838; font-size: 0.22rem;">忘记密码</router-link></span>
        </div>
        <!--<p style="background-position: none;margin-top: 90px;color:#999999">———— 以下方式登录 ————</p>

        <img src="../common/icon/weixin.png" height="100%"  slot="icon">-->
        <div class="otherLogin">
          <span>以下方式登录</span>
          <div @click="WeChatLogin"><img src="../common/images/wx1.png" height="100%" slot="icon"></div>
        </div>

        <!-- 点击微信 的 提示框 -->
        <div class="mint-msgbox-wrapper" style="position: absolute; z-index: 2011;" v-if="msgboxFlag">
          <div class="mint-msgbox y-msgbox"  >
            <!-- <div class="mint-msgbox-header">
              <div class="mint-msgbox-title">提示</div>
            </div>  -->
            <div class="mint-msgbox-content y-msgbox-content">
                <div class="mint-msgbox-message y-msgbox-message">“友圈”想要打开“微信”</div> 
                <div class="mint-msgbox-input" style="display: none;">
                  <input placeholder="" type="text"> 
                  <div class="mint-msgbox-errormsg" style="visibility: hidden;"></div>
                </div>
            </div> 
            <div class="mint-msgbox-btns y-msgbox-btns">
                <button class="mint-msgbox-btn mint-msgbox-cancel" style=""  @click="msgboxFlag=false">取消</button>
                <button class="mint-msgbox-btn mint-msgbox-confirm" @click="weChatLogin2">打开</button>
            </div>
          </div>
        </div>
        <!-- 用户名不存在的提示框 -->
        <div class="y-prompt-msgbox " style="position: absolute; z-index: 2011;" v-if="promptmsgboxFlag">
          <!-- <div class="y-prompt-content">
            <div class="mint-msgbox-title">提示</div>
          </div>  -->
          <div class="y-prompt-content">
            <div class="y-prompt-message">{{response.data.msg}}</div>
            <div class="mint-msgbox-input" >
              <input placeholder="" type="text"> 
              <div class="mint-msgbox-errormsg" style="visibility: hidden;"></div>
            </div>
          </div> 
          <div class="y-prompt-btns">
              <button class="y-msgbox-btn y-msgbox-cancelBtn" @click="promptmsgboxFlag=false">取消</button> 
              <button class="y-msgbox-btn y-msgbox-deterBtn">确定</button>
          </div>
        </div>
        <!-- 遮罩层 -->
        <div class="v-modal" @click="msgboxFlag=false"  style="width:100%;height:100%;background-color:#000; z-index: 10;" v-if="msgboxFlag"></div>

      </div>

  </div>

</template>

<script>
  import setHeader from '../public/setHeader.vue';
  import { Button } from 'mint-ui';
  // import { Indicator } from 'mint-ui';
  import axios from 'axios';
  import qs from 'qs'
  import { MessageBox } from 'mint-ui';
  export default {
    data() {
      
      return {
        // headerTitle:'账号登陆',
        msgboxFlag:false,
        promptmsgboxFlag: false,
        logining: true,
        ruleForm2: {
          username:'', 
          password:'',
          // captcha: ''
        },
        // rules2: {
        //   account: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
        //     //{ validator: validaePass }
        //   ],
        //   checkPass: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     //{ validator: validaePass2 }
        //   ]
        // },
        checked: true,
        contpending: false,
        count: 60
      };
    },
    components: {
      setHeader,
      Button
    },
    created() {
      this.$nextTick(() => {
        // 这里调用
        this.phoneFocus();
        this.smsFocus();
        this.phoneBlur();
        this.smsBlur();
      });
      // window.addEventListener(this.handleSubmit2);
    },
    methods: {
      phoneFocus() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #e50838";
      },
      smsFocus() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #e50838";
      },
      phoneBlur() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #d8d8d8";
      },
      smsBlur() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #d8d8d8";
      },


      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2() {
        var _this = this;
        // var params = JSON.stringify(this.ruleForm2);
        // this.loading = true;
        // Indicator.open({
        //   text: '加载中...',
        //   spinnerType: 'snake'
        // });
              // this.$router.push({path:'/'});
        // 
        // console.log(qs.stringify(this.ruleForm2));
        // console.log(this.ruleForm2)
        // loadinginstace =  Indicator.open({text: '加载中...',spinnerType: 'snake'});
        if (_this.ruleForm2.username == "") {
          _this.$openTips({
            text: "手机号码不能为空",
            time:2000
          });
          return;
        }

        if (!/^1[3456789]\d{9}$/.test(_this.ruleForm2.username)) {
          _this.$openTips({
            text: "电话号码格式错误",
            time:2000
          });
          return;
        }

        if (_this.ruleForm2.password == "") {
          _this.$openTips({
            text: "密码不能为空",
            time:2000
          });
          return;
        }
        
        axios.post(_this.$path+'/api.php/api/Login',qs.stringify(this.ruleForm2)).then((response) => {
               if(response){ 
                  // Indicator.close();
                  //  _this.msgboxFlag=true
                  console.log('token---', response.data);
                 if(response.data.code == 200){ 
                      window.localStorage.setItem('access_token',response.data.data.access_token);
                      window.localStorage.setItem('timer', Date.now());

                      // var valueDate = JSON.stringify({
                      //     val: value,
                      //     timer: curtime
                      // });
                      // const access = window.localStorage.setItem('access_token',response.data.data.access_token);
                      // let accessData = null;
                      // try {
                      //     accessData = JSON.parse(access);
                      // } catch (err) {
                      //     console.log(JSON.stringify(err));
                      // }
                      
                      //user_company_status  0是未绑定  1是已绑定  2是已有企业但未认证 3加入他人企业未通过
                      if(response.data.data.user_company_status == 1) {
                          _this.$openTips({
                            text: '登录成功',
                            time: 1000
                          })
                          _this.$router.push({path:'/userCenter'});
                      }
                      else if(response.data.data.user_company_status == 2) {
                        _this.$openDialog({
                          src: require('../common/images/UI-10.png'),
                          title: '欢迎您',
                          message: '为了更好的使用本平台',
                          messagemore: '您需要绑定您目前就职或创办的企业',
                          okText: '立即绑定',
                          callback (flag) {
                            if(flag) {
                              _this.$router.push({path:'/Certification'});
                            }else {
                              _this.$router.push({path:'/userCenter'});
                            }   
                          }
                        });
                      }else if(response.data.data.user_company_status == 3) {
                          _this.$openDialog({
                            src: require('../common/images/UI-10.png'),
                            title: '登录成功',
                            message: '请等待审核完成',
                            okText: '完成',
                            callback (flag) {
                              if(flag) {
                                _this.$router.push({path:'/userCenter'});
                              }else {
                                _this.$router.push({path:'/userCenter'});
                              }  
                            }
                        });
                      }
                      else {
                        _this.$openDialog({
                          src: require('../common/images/UI-10.png'),
                          title: '欢迎您',
                          message: '为了更好的使用本平台',
                          messagemore: '您需要绑定您目前就职或创办的企业',
                          okText: '立即绑定',
                          cancelText: '暂时跳过',
                          callback (flag) {
                              if(flag) {
                                _this.$router.push({path:'/companyCreate'});
                              }else {
                                _this.$router.push({path:'/userCenter'});
                              }     
                          }
                        });
                      }

                      
                      // MessageBox('提示',response.data.msg).then(action =>{
                      //   _this.$router.push({path:'/userCenter'});
                      // });

                  }else{ 
                    // MessageBox('提示',response.data.msg);
                    _this.$openTips({
                      text: response.data.msg,
                      time: 2000
                    })
                  }
               }
             
        })


      },

      /*sendSMS(){ 
       this.clearCookie('cookie');
         let code = "";    
         var codeLength = 4;//验证码的长度   
         var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',   
                     'S','T','U','V','W','X','Y','Z');//随机数   
         for(var i = 0; i < codeLength; i++) {
               //循环操作   
               var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）   
               code += random[index];//根据索引取得随机数加到code上   
         }   
              console.log(code);

        this.setCookie('cookie',code);
        alert('验证码:'+this.getCookie('cookie'));
      },
       //设置cookie
      setCookie: function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        console.info(cname + "=" + cvalue + "; " + expires);
        // document.cookie = cname + "=" + cvalue + "; " + expires;
        console.info(document.cookie);
      },
      //获取cookie
      getCookie: function (cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        // console.log("获取cookie,现在循环")
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          console.log(c)
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) != -1){
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      //清除cookie
      clearCookie: function () {
        this.setCookie("username", "", -1);
      },*/
      //注册
      smsregister:function(){
      	this.$router.push({path:'/login'});
      },

      // 其他方式登录 微信登录
      WeChatLogin:function(){
        console.log('222')
        this.msgboxFlag=true
        // this.$refs.box1.style.background="black";
        
      },
      //唤起微信登陆
      weChatLogin2(){
        this.$post(
           this.$path+'/index.php/api/v2',{step:1}).then((res) => {
            console.log('wechat',res);
          })
      },


    }
  }

</script>
<style>
/* #app{
  height:100% ;
} */
.mint-user-cell{
	    /* border-bottom: #d2d2d2 solid 1px !important; */
	    height: 1rem !important;
}
/* input:focus {
	    border-bottom: 1px solid #e50838 !important;
} */
.mintui{
      font-size: 0.32rem;
}
.el-long-create-button{
	margin-top:0.69rem  !important;
}
.el-long-user-button{
	width:100% !important;
	
}
.el-long-user-re-button{
	margin-top:0.39rem  !important;
}
.otherLogin{
  display: flex;
  flex-direction: column;
}
.otherLogin span{
  color:#c6c6c6;
  font-size: 0.22rem ;
  display: block;
  margin-top: 1.16rem ;
  margin-bottom: 0.5rem ;
  position: relative ;
}
.otherLogin span:after{
  position: absolute ;
  right: 0.8rem;
  top:0.15rem;
   content: "";
   clear: both;
   display: block;
   height: 0.02rem ;
   width: 1rem ;
   background:rgba(244,245,247,1);
}
.otherLogin span:before {
  position: absolute ;
    left: 0.8rem;
    top: 0.15rem;
   content: "";
   clear: both;
   display: block;
   height: 0.02rem ;
   width: 1rem ;
   background:rgba(244,245,247,1);
}
.otherLogin>div{
  margin : 0 auto ;
  width:0.8rem ;
  height:0.8rem ;
  background:rgba(244,245,247,1);
  border-radius:50%;
  display:flex ;
  justify-content: center;
  align-items: center;
}
.otherLogin>div img{
  width: 70% ;
  height: 70% ;
}
.main-login .mint-cell-value{
   margin-right: 0; 
   padding: 0;
}
.main-login .mint-field {
  padding: 0;
}

/* 头部颜色为白色 */
.main-passlogin .header_array_text_white {
  background-color: #fff;
  color: #333;
}
.main-passlogin .mint-cell-value {
  margin-right: 0;
  padding: 0;
}

/* 账号密码输入框 */
.default_input_box #btn {
    float: right;
    border: 1px solid #e50838;
    height: 0.56rem;
    border-radius: 4px;
    outline: none;
    font-size: 0.22rem;
    line-height: 0.54rem;
    margin: -0.8rem 0;
    color: #e50838;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.1rem;
}

/* 找不到密码 */
.y-text-top{
  margin-top: 0.2rem ;
  margin-bottom: 0.48rem ;
}

.y-text-top .NoGetCode a{
  color: #c6c6c6 !important;
  font-size:  0.22rem !important;
}

</style>
